<style lang="less">
@import './home.less';
</style>
<template>
  <div class="home-main">
    <Row class-name="home-page-row" :gutter="10">
      <Col :xs="24" :md="12" :sm="24" :lg="6" :style="{marginBottom: '10px'}" v-for="(item,index) in dataList" :key="index">
        <Card class="card" :style="{backgroundImage:item.color}">
          <div class="count">     
            <div class="icon">
              <Icon color="#fff" :type="item.icon" size="55"/>
            </div>
            <div class="countTo">    
              <countTo class="num" :startVal='0' :endVal='item.count' :duration='3000'></countTo>
              <h5>{{item.title}}</h5>
            </div>
          </div>
        </Card>
      </Col>
    </Row>
    <Row  :gutter="10">
      <Col :xs="24" :md="12" :sm="24" :lg="12" :style="{marginBottom: '10px'}">
        <Card dis-hover>
          <div class="echarts">
            <eline></eline>
          </div>
        </Card>
      </Col>
      <Col :xs="24" :md="12" :sm="24" :lg="12" :style="{marginBottom: '10px'}">
        <Card dis-hover>
            <ul>
              <Card dis-hover class="modules">
                <div slot="title" class="title">
                    <Icon type="md-clock" size="15" style="margin-right:5px"/>
                    待办事项
                    <Badge :count="20"  style="margin-left:5px;color:#1890ff "></Badge>
                </div>
                <li class="modulesList" v-for="(item,index) in waitList" :key="index">
                    <router-link :to="item.url" target="_blank">{{ item.name }}</router-link>
                    <div>
                        <Badge :count="item.count" :class-name="item.class"  style="margin-left:5px"></Badge>
                    </div>
                </li>
              </Card>
            </ul>
            <ul style="margin-top:15px">
              <Card dis-hover class="modules">
                <div slot="title" class="title">
                    <Icon type="md-settings" size="15" style="margin-right:5px"/>
                    开启/关闭模块
                </div>
                <li class="modulesList" v-for="(item,index) in modulesList" :key="index">
                    <div :href="item.url" target="_blank">{{ item.name }}</div>
                    <div>
                        <i-switch size="large" v-model="item.checked" @on-change="change(index)">
                          <span slot="open">开启</span>
                          <span slot="close">关闭</span>
                        </i-switch>
                    </div>
                </li>
              </Card>
            </ul>
        </Card>
      </Col>
    </Row>
    <!-- <Row  :gutter="10">
      <Col :xs="24" :md="24" :sm="24" :lg="24" :style="{marginBottom: '10px'}">
        <Card dis-hover class="modules">
          <Row type="flex" >
            <div class="user-infor">
              <div>
                <Avatar size="70"  :src="avatorPath" />
              </div>
              <div>
                  <b class="card-user-infor-name">{{name}}</b>
              </div>
            </div>
          </Row>
        </Card>
      </Col>
    </Row> -->
  </div>
</template>

<script>
import eline from '@/components/charts/line.vue'
import countTo from 'vue-count-to';
import Cookies from 'js-cookie'
export default {
  name: 'home_index',
  components: {
    countTo,
    eline
  },
  data() {
    return {
      waitList: [
          {
              name: '提现申请',
              class:'demo-badge-aw',
              url:'',
              count: 20
          },
          {
              name: '退款申请',
              class:'demo-badge-alone',
              url:'',
              count: 30
          },
      ],
      modulesList: [
          {
              name: '分销模块',
              checked: true
          },
          {
              name: '积分模块',
              checked: true
          },
      ],
      dataList:[
        {
          icon:'md-person',
          color:'linear-gradient(230deg, #0e4cfd, #6a8eff)',
          count:3000,
          title:'用户总数'
        }, 
        {
          icon:'md-briefcase',
          color:'linear-gradient(230deg, #fc5286, #fbaaa2)',
          count:3000,
          title:'商品总数'
        }, 
        {
          icon:'md-list-box',
          color:'linear-gradient(230deg, #ffc480, #ff763b)',
          count:3000,
          title:'订单总数'
        }, 
        {
          icon:'logo-yen',
          color:'linear-gradient(230deg, #759bff, #843cf6)',
          count:3000,
          title:'销售金额'
        }, 
      ],
      name: '',
      html:''
    }
  },
  created() {
    this.name = Cookies.get('user')
  },
  computed: {
    avatorPath() {
      return  window.location.protocol + '//' +  window.location.host + '/logo.png'
    }
  },
  mounted() {

  },
  methods: {

  }
}
</script>
